<template>
	<div>
		<div class="header">
			<span>订单支付</span>
			<a href="#/" @click="sendInfo">关闭</a>
		</div>
		<div class="money">
			<span>应付金额 <span class="one">¥{{money}}</span></span>
		</div>
		<div class="fafang1">
			<img src="https://misc.gomein.net.cn/finance/cashier/mobile_20160803/wap/ALIPAY.png" class="one_img"/>
			<div class="zhifubao">
				<span>
					支付宝
				</span>
				<br />
				<span>
					无账号也支持银行卡快捷支付
				</span>
				<img src="../../assets/liu/右箭头.png"/>
			</div>
		</div>
			<div class="fafang2">
			<img src="https://misc.gomein.net.cn/finance/cashier/mobile_20160803/wap/WEIXINPAYH5.png" class="one_img"/>
			<div class="weixin">
				<span >
					微信
				</span>
				<br />
				<span>
					推荐以安装微信的用户使用
				</span>
				<img src="../../assets/liu/右箭头.png"/>
			</div>
		</div>
		<div class="fafang3">
			<img src="https://misc.gomein.net.cn/finance/cashier/mobile_20160803/wap/UNIONPAY020.png" class="one_img"/>
			<div class="kuaizhifu">
				<span >
					银联卡快捷支付
				</span>
				<br />
				<span>
					无需开通网银,支持大部分银行
				</span>
				<img src="../../assets/liu/右箭头.png"/>
			</div>
		</div>
		<div class="fafang4">
			<img src="https://misc.gomein.net.cn/finance/cashier/mobile_20160803/wap/YSTPAYWAP.png" class="one_img"/>
			<div class="meifubao">
				<span >
					美付宝
				</span>
				<br />
				<span>
					支持储蓄卡,信用卡快捷支付
				</span>
				<img src="../../assets/liu/右箭头.png"/>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default{
		name:'zhifu',
		data(){
			return {
				money:''
			}
		},
		methods:{
			sendInfo(){
				var shopping = this.$store.state.shopping[this.$store.state.shopping.length-1];
				var src = shopping[0];
				var imgstr = src.substr(16) ;
				var goods = shopping[1];
				var type  = shopping[2];
				var num   = shopping[3];
				var place = shopping[4];
				var price = shopping[5]* num;
				//总金额
				var muchMoney = price +8;
				//手机号
				var obj = localStorage.obj;
				var arr = JSON.parse(obj);
				var phone = arr[0].phone;
				
				var _this = this;
				this.axios.get('http://localhost:3000/router/shop',{
							params:{
									phone:phone,
									src:src,
									goods:goods,
									type:type,
									num:num,
									place:place,
									price:price,
									muchMoney:muchMoney,
									condition:_this.sql.shopping.add
								}
					}).then(function(res){
							if(res.data.msg.err){
								//修改缓存
								var obj = {
									phone:'',
									psw:''
								}
								//缓存数据
								var arry = [];
								arry.push(obj);
								localStorage.setItem('obj',JSON.stringify(arry));

							}
							
							
						})
					}
		},
		mounted(){
			this.money = this.$store.state.muchMoney[this.$store.state.muchMoney.length-1]
		},
		computed:{
			shopping(){
				return this.$store.state.shopping;
			},
			muchMoney(){
				return this.$store.state.muchMoney;
			}
		}
	}
 
</script>

<style scoped>
	.header{
		line-height: 4rem;
	}
	.header span{
	margin-left: 40%;
		font-size: 2rem;	
	}
	.header a{
		color: dimgray;
		font-size: 1.6rem;
		margin-left: 18%;
	}
	.money{
		line-height: 5rem;
		background: rgba(204, 204, 204, 0.2);
		border-top:1px solid rgba(204, 204, 204, 0.8);
	}
	.money span:nth-child(1){
		margin-left: 5%;
		font-size: 1.5rem;
	}
	.money .one{
	  color:red;
	}
	.fafang1{
		height: 5rem;
	}
	.fafang1 .one_img{
		width: 3rem;
		margin-top: 1.1rem;
		margin-left: 5%;
	}
	.zhifubao img{
		width: 1.5rem;
	}
	.zhifubao{
		line-height: 2rem;
		border-bottom: 1px solid rgba(204, 204, 204, 0.8);
		margin-left: 20%;
		margin-top: -3.5rem;
	}
	.zhifubao img{
		margin-left: 23%;
		margin-top: -4rem;
	}
	.zhifubao span:nth-child(1){
		font-size: 1.5rem;
	}
	
	.fafang2{
		height: 5rem;
	}
	.fafang2 .one_img{
		width: 3rem;
		margin-top: 1.1rem;
		margin-left: 5%;
	}
	.weixin img{
		width: 1.5rem;
	}
	.weixin{
		line-height: 2rem;
		border-bottom: 1px solid rgba(204, 204, 204, 0.8);
		margin-left: 20%;
		margin-top: -3.5rem;
	}
	.weixin img{
		margin-left: 27%;
		margin-top: -4rem;
	}
	.weixin span:nth-child(1){
		font-size: 1.5rem;
	}
	.fafang3{
		height: 5rem;
	}
	.fafang3 .one_img{
		width: 3rem;
		margin-top: 1.1rem;
		margin-left: 5%;
	}
	.kuaizhifu img{
		width: 1.5rem;
	}
	.kuaizhifu{
		line-height: 2rem;
		border-bottom: 1px solid rgba(204, 204, 204, 0.8);
		margin-left: 20%;
		margin-top: -3.5rem;
	}
	.kuaizhifu img{
		margin-left: 21%;
		margin-top: -4rem;
	}
	.kuaizhifu span:nth-child(1){
		font-size: 1.5rem;
	}
	.fafang4{
		height: 5rem;
	}
	.fafang4 .one_img{
		width: 3rem;
		margin-top: 1.1rem;
		margin-left: 5%;
	}
	.meifubao img{
		width: 1.5rem;
	}
	.meifubao{
		line-height: 2rem;
		border-bottom: 1px solid rgba(204, 204, 204, 0.8);
		margin-left: 20%;
		margin-top: -3.5rem;
	}
	.meifubao img{
		margin-left: 25%;
		margin-top: -4rem;
	}
	.meifubao span:nth-child(1){
		font-size: 1.5rem;
	}
</style>